<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #banner{
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
        }
        #banner img{
            width: 100%;
            height: 100%;
        }
        #banner .opa{
            width: 100%;
            height: 35px;
            line-height: 35px;
            background: red;
            position: absolute;
            left: 0;
            bottom: 0;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
        #banner p{
            height: 35px;
            width: 100%;
            position: absolute;
            left: 32px;
            bottom: 0;
            line-height: 35px;
            color: #fff;
        }
        #banner span{
            width: 80px;
            height: 150px;
            background: yellow;
            opacity: 0.5;
            text-align: center;
            line-height: 150px;
position: absolute;
top: 50%;
margin-top: -75px;
display: none;
cursor: pointer;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
</style>
</head>
<body>
<div id="banner">
                <img src="img/aaa.jpg" id="pic" alt="">
                                                      <div class="opa"></div>
                                                                         <p>这是第一张图片</p>
                                                                                     <span id="prev">&lt;</span>
                                                                                                           <span id="next">&gt;</span>
                                                                                                                                 </div>
                                                                                                                                   </body>
                                                                                                                                     </html>
                                                                                                                                       <script>
                                                                                                                                       var oBanner = document.getElementById("banner");
var aSpan = document.getElementsByTagName("span");
var oPic = document.getElementById("pic");
var oP = document.getElementsByTagName("p")[0];
var arrImg = ["img/aaa.jpg","img/bbb.jpg","img/eee.jpg","img/ccc.jpg"];
var arrText = ["这是第一张图片","这是第二张图片","这是第三张图片","这是第四张图片"];
function disPlay(value) {
for(var i=0;i<aSpan.length;i++){
    aSpan[i].style.display = value;
}
}
oBanner.onmouseover = function () {
disPlay("block");
};

oBanner.onmouseout = function () {
disPlay("none");
};
var num = 0;
aSpan[0].onclick = function () {
if(num == 0){
    num = arrImg.length - 1;
}else{
     num--;
 };
oPic.src = arrImg[num];
oP.innerHTML = arrText[num];
};

aSpan[1].onclick = function () {
if(num==3){
    num = 0;
}else{
     num++;
 }
oPic.src = arrImg[num];
oP.innerHTML = arrText[num];
}
</script>